<template>
  <div class="dashboard-editor-container">

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:16px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>历史七天登录人数统计</span>
          </div>
          <div>
            <LineChartOfDynamic :chartDataSource="chartData"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>各年级学生学分修读情况</span>
          </div>
          <div id="gradeCredit" style="min-width:400px;height:400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-card class="box-card" v-hasPermi="['data:statistics:stuCredit']">
        <div slot="header" class="clearfix">
          <span>每学期学分修读情况</span>
        </div>
        <div id="stuCredit" style="min-width:400px;height:400px"></div>
      </el-card>
    </el-row>

    <el-row>
      <el-card class="box-card" v-hasPermi="['data:statistics:stuGradePoint']">
        <div slot="header" class="clearfix">
          <span>学生每学期学分绩点修读情况</span>
        </div>
        <div id="stuGradePoint" style="min-width:400px;height:400px"></div>
      </el-card>
    </el-row>



  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import LineChartOfDynamic from './dashboard/LineChartOfDynamic'

import {getLoginLineChart} from "@/api/monitor/logininfor";


/*引入Highcharts*/
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import Highmaps from "highcharts/modules/map";
import { statisticsDegreeGrade, statisticsStuGradePoint } from '@/api/warn/statistics'

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    LineChartOfDynamic
  },
  created() {
    console.log("created start");
    this.getLoginLineChart();

  },
  mounted() {
    this.getData();

    this.gradeCredit();
  },
  data() {
    return {

      chartData: {
        // ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        xaxisData: [],
        // [{'name':'登录人数','data':[10,50,32,54,12,86,50]}]
        yaxisData: [],
        // y轴数据格式化方法,自定义传入,没有方法传null
        yAxisFormatFunction: null
      },

    }
  },
  methods: {
    /** 查询登录日志 */
    getLoginLineChart() {
      getLoginLineChart().then(response => {
          this.chartData = response.data;
        }
      );
    },
    getData() {
      statisticsDegreeGrade().then(res => {
        Highcharts.chart('stuCredit', {
          title: {
            text: '学生每学期学分修读情况'
          },
          xAxis: {
            categories: res.data.xaxis
          },
          yAxis: {
            title: {
              text: '学分'
            }
          },
          tooltip: {
            valueSuffix: ' 分'
          },
          plotOptions: {
            series: {
              borderRadius: '25%'
            }
          },
          series: [{
            type: 'column',
            name: '培养方案学分',
            data: res.data.schemeCredits
          }, {
            type: 'column',
            name: '已得学分',
            data: res.data.completedCredits
          },  {
            type: 'line',
            step: 'center',
            name: '平均值',
            data: res.data.averageValue,
            marker: {
              lineWidth: 2,
              lineColor: Highcharts.getOptions().colors[3],
              fillColor: 'white'
            }
          }, {
            type: 'pie',
            name: 'Total',
            data: [{
              name: '必修学分',
              y: res.data.compulsoryCredits,
              color: Highcharts.getOptions().colors[0], // 2020 color
              dataLabels: {
                enabled: true,
                distance: -50,
                format: '总学分{point.total}',
                style: {
                  fontSize: '15px'
                }
              }
            }, {
              name: '选修学分',
              y: res.data.electiveCredits,
              color: Highcharts.getOptions().colors[1] // 2021 color
            }],
            center: [75, 65],
            size: 100,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
              enabled: false
            }
          }]
        });
      })

      statisticsStuGradePoint().then(res => {
        Highcharts.chart('stuGradePoint', {
          title: {
            text: '学生每学期学分绩点修读情况'
          },
          xAxis: {
            categories: res.data.xaxis
          },
          yAxis: {
            title: {
              text: '学分绩点'
            }
          },
          tooltip: {
            valueSuffix: ''
          },
          plotOptions: {
            series: {
              borderRadius: '25%'
            }
          },
          series: [{
            type: 'column',
            name: '每学期最大学分绩点',
            data: res.data.schemeCredits
          }, {
            type: 'column',
            name: '已得学分绩点',
            data: res.data.completedCredits
          },  {
            type: 'line',
            step: 'center',
            name: '平均值',
            data: res.data.averageValue,
            marker: {
              lineWidth: 2,
              lineColor: Highcharts.getOptions().colors[3],
              fillColor: 'white'
            }
          }, {
            type: 'pie',
            name: 'Total',
            data: [{
              name: '必修学分绩点',
              y: res.data.compulsoryCredits,
              color: Highcharts.getOptions().colors[0], // 2020 color
              dataLabels: {
                enabled: true,
                distance: -50,
                format: '总学分绩点{point.total}',
                style: {
                  fontSize: '15px'
                }
              }
            }, {
              name: '选修学分绩点',
              y: res.data.electiveCredits,
              color: Highcharts.getOptions().colors[1] // 2021 color
            }],
            center: [75, 65],
            size: 100,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
              enabled: false
            }
          }]
        });
      })
    },
    gradeCredit(){
      Highcharts.chart("gradeCredit", {
        chart: {
          type: "column",
        },
        title: {
          text: "各年级学生学分修读情况",
        },
        subtitle: {
          text: "年级学分明细",
        },
        xAxis: {
          categories: ["2019级", "2020级", "2021级", "2023级", "2024级", "2025级"],
          accessibility: {
            description: "Countries",
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "学分",
          },
        },
        tooltip: {
          valueSuffix: "分",
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "方案总学分",
            data: [387749, 280000, 129000, 64300, 54000, 34300],
          },
          {
            name: "学生平均学分",
            data: [45321, 140000, 10000, 140500, 19500, 113500],
          },
          {
            name: "最低学分",
            data: [45321, 140000, 10000, 140500, 19500, 113500],
          },
          {
            name: "最高学分",
            data: [45321, 140000, 10000, 140500, 19500, 113500],
          },
        ],
      })

    }


  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    //margin-bottom: 16px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.dashboard {
  &-container {
    margin: 10px;
  }
  &-text {
    font-size: 20px;
    line-height: 40px;
  }
}
</style>
